<template>
    <div>
        <page-main>
            <el-table
                :data="currentPageBlogList"
                style="width: 100%;"
            >
                <el-table-column
                    prop="date"
                    label="日期"
                >
                    <template slot-scope="scope">
                        <p>{{ new Date(scope.row.date).toLocaleDateString() }}</p>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="title"
                    label="标题"
                />
                <el-table-column
                    label="图片"
                    width="150"
                >
                    <template slot-scope="scope">
                        <img :src="baseURL + scope.row.img" width="100px" height="100px" alt="" title="博客右侧图片">
                    </template>
                </el-table-column>
                <el-table-column
                    prop="commentNum"
                    label="评论数"
                />
                <el-table-column
                    label="操作"
                >
                    <template slot-scope="scope">
                        <el-button size="mini" @click="updateBlogFn(scope.row.id)">修改</el-button>
                        <el-button size="mini" type="danger" @click="delBlogFn(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-row v-if="blogList.length > 5" class="page-container" type="flex" justify="end">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="blogList.length"
                    :page-size="5"
                    @current-change="handleCurrentChange"
                />
            </el-row>
        </page-main>
    </div>
</template>
<script>
import { getBlogList, baseURL, delBlog } from '@/api/myIndex'
export default {
    name: 'Blog',
    data() {
        return {
            blogList: [],
            currentPageBlogList: [],
            currentPageNum: 1,
            baseURL
        }
    },
    created() {
        this.getBlog()
    },
    methods: {
        // 获取所有博客
        async getBlog() {
            let result = await getBlogList()
            if (result.code === 200) {
                this.blogList = result.data
                // 默认展示前五条
                this.handleCurrentChange(1)
            }
        },
        // 更新博客
        updateBlogFn(id) {
            this.$router.push(`/component_extend_example/editor/${id}`)
        },
        // 删除博客
        async delBlogFn(id) {
            let result = await delBlog(id)
            if (result.code === 200) {
                this.$message({
                    message: '删除成功!',
                    type: 'success'
                })
                this.blogList = this.blogList.filter(item => item.id !== id)
                this.handleCurrentChange(this.currentPageNum)
                return
            }
            this.$message.error(result.message)
        },
        // 分页功能
        handleCurrentChange(val) {
            this.currentPageNum = val
            this.currentPageBlogList = this.blogList.filter((item, index) => {
                if (index >=  (val - 1) * 5 && index < val * 5) return item
            })
        }
    }
}
</script>
<style>
.is-justify-end {
    margin-top: 20px;
}
</style>
